<template>
  <div>
    Pinia:{{ Test }}
    <br />
    getters :{{ Test.newName }}
    <br />
    <button @click="change">同步</button>
    <button @click="as">异步</button>
    <button @click="reset">reset</button>
    <br>
    <div>base:{{Base.baseCurrent}}</div>
    <button @click="addBase">addBase</button>
    <button @click="resetBase">resetBase</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore , useBaseStore } from './stores'

const Test = useTestStore()
const Base = useBaseStore()
const addBase = () => {
  Base.baseCurrent++
}
const resetBase = () => { 
  Base.$reset()
}

const change = () => {
  Test.setName()
}
const as = () => {
  Test.setUser()
}
const reset = () => {
  Test.$reset() //重置state
}
// 订阅state的改变  只要state由变化就回走这个函数
//如果组件卸载之后还想继续调用   可以设置第二个参数
Test.$subscribe(
  (args, state) => {
    console.log('subscribe args', args)
    console.log('subscribe state', state)
  },
  {
    detached: true,
    deep: true,
    flush: "post"
  }
)
//订阅actions的调用   只要actions被调用就会走这个函数
  // 第二个参数    设置为true 组件卸载了还能继续使用
Test.$onAction((args) => {
  console.log('onActions args',args)
},true)
</script>

<style scoped></style>
